<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>密码修改</title>
    <script src = "${pageContext.request.contextPath}/static/js/polyfill.js"></script><%--使ie兼容es6语法--%>
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">  <%--兼容ie浏览器--%>
    <link href="${pageContext.request.contextPath}/static/layui-v2.6.8/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/layui-v2.6.8/layui/layui.js"></script>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/password.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery/jquery-1.11.0.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/layer-v3.5.1/layer/layer.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.css">
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap-min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/axios-min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/live_meeting.css">
    <style>#navbar-default {
        background-color: #71BD71;
    }
    .itembox_2{
        position: relative;
    }
        .layui-icon{
            position: absolute;
            left: 6.6%;
        }
    .aui-footer-fixed{
        display: none;
    }
    </style>
</head>
<body>
<div id="header">
    <nav id="navbar-default" class="navbar navbar-default top-nabar" role="navigation"
         style="overflow:hidden;position:fixed;top:0;width:100%;z-index:1002;border: 0">
        <div class="row">
            <div class="container-fluid" id="fluid">
                <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1" style=";padding-left: 6px;">
                    <a class="navbar-brand" href="javascript:history.back(-1)"
                       style="padding-left: 3px;">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    </a>
                </div>
            </div>
        </div>
    </nav>
    <br><br>
</div>

<div class="container" style="width: 100%">
    <div class="row" align="center">
        <div id="toppp">

            <ul id="ul">
                <li class="mainCol firLi">&gt;身份验证</li>
                <li class="mainCol">&gt;登录密码重置</li>
                <li class="lastLi">&gt;重置完成</li>
            </ul>
            <img src="${pageContext.request.contextPath}/resource/images/login.png"/>
            <form action="" method="post">
                <div class="alert alert-danger" id="vf" role="alert" style="display: none;z-index: 50">确认密码不一致</div>
                <div class="alert alert-danger" id="bf" role="alert" style="display: none;z-index: 50">存在未填项</div>
                <div class="itembox itembox_2">
                    <i class="layui-icon layui-icon-cellphone"></i>
                    <input type="text" name="phoneNumber" id="phone" placeholder="请输入手机号码" maxlength="11"
                           onkeyup="value=value.replace(/[^\d]/g,'')" style="margin-left: 0"></span>

                </div>
                <div class="itembox itembox_2" style="position: relative">
                    <i class="layui-icon  layui-icon-password"></i>
                    <input type="text" id="yzm" name="text2" placeholder="手机验证码" class="yzm" maxlength="6"
                           onkeyup="value=value.replace(/[^\d]/g,'')" style="margin-left: 0"></span>
                    <span id="codespan" style="position: absolute;right: 7%;line-height: 1.88;background-color: #DEE1E6;width: 60px;height:25px;border-radius: 5px" onclick="getCaptcha()">获取</span>
                </div>
                <div class="itembox itembox_2">
                    <i class="layui-icon  layui-icon-password"></i>
                    <input type="text" name="password" id="password" placeholder="请输入新登录密码" style="margin-left: 0"></span>
                </div>
                <div class="itembox itembox_2">
                    <i class="layui-icon  layui-icon-password"></i>
                    <input type="text" id="passwordEnter" placeholder="请再次输入新密码" style="margin-left: 0"> </span>

                </div>
            </form>
            <div class="btnBox">
                <button onclick="submissionData()">完成</button>
            </div>
        </div>
    </div>
</div>
<footer class="aui-footer aui-footer-fixed">

    <a href="/boke/index.jsp" class="aui-tabBar-item " style="text-decoration:none;">
        <span class="aui-tabBar-item-icon"><i class="icon icon-loan"></i></span>
        <span class="aui-tabBar-item-text">首页</span></a>

    <a href="/bokehall/hall/allHall" class="aui-tabBar-item aui-tabBar-item-active">
        <span class="aui-tabBar-item-icon"><i class="icon icon-credit"></i></span>
        <span class="aui-tabBar-item-text">会诊</span></a>

    <a href="/boke/msg/chatfriend.jsp" class="aui-tabBar-item ">
        <span class="aui-tabBar-item-icon"><i class="icon icon-ions"></i></span>
        <span class="aui-tabBar-item-text">消息</span></a>

    <a href="/boke/me.jsp" class="aui-tabBar-item "><span
            class="aui-tabBar-item-icon"><i class="icon icon-mine"></i></span>
        <span
                class="aui-tabBar-item-text">我的
        </span></a>
</footer>
</body>
<script>
    $(document).ready(function () {
        //页面加载先实例化一次表单对象数据
        $("#header").hide();
        $("#toppp").css("margin-top","0")  //隐藏导航
    });
    //给提交的手机号发送验证码，并启用倒计时方法
    function getCaptcha() {
        let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;  //手机号匹配正则

        if ($("#phone").val() == null || $("#phone").val() == '') {
            alert("手机号码不能为空");
            return false;
        }
        if(!reg_tel.test($("#phone").val())){
            alert('手机格式不正确');
            return false;
        }
        if ($("#phone").val().length < 11) {
            alert("请输入11位手机号");
        } else {
            countdown(60);
            let form = new FormData();
            form.append("phone", $("#phone").val());
            axios({
                method: 'post',
                url: '${pageContext.request.contextPath}/user/sendmessage',
                data: form
            })
                .then(function (response) {
                    if (response.data == "success") {

                    } else {
                        alert("发送失败,请重试")
                    }
                })
        }
    }

    //执行倒计时方法
    function countdown(seconds) {
        if (seconds > 1) {
            seconds--;
            $("#codespan").text(seconds+'秒').attr("disabled", true);
            // 定时1秒调用一次
            setTimeout(function () {
                countdown(seconds, $("#codespan"));
            }, 1000);
        } else {
            $("#codespan").text("获取").attr("disabled", false);
        }
    }

    //异步提交表单方法
    function submissionData() {
        let a = $("#phone").val()
        let b = $("#yzm").val()
        let c = $("#password").val()
        //判断值非空
        if ((a == null || a == '') || (b == null || b == '') || (c == null || c == '')) {
            $("#bf").show(0).delay(1500).hide(0);
            return false;
        }
        //判断两次密码是否一致
        if ($("#password").val() != $("#passwordEnter").val()) {
            //显示密码不一致提醒
            $("#vf").show(0).delay(1500).hide(0);
            return false;
        } else {
            countdown();
            let format = new FormData();
            format.append("phoneNumber", $("#phone").val().trim())
            format.append("text2", $("#yzm").val().trim())
            format.append("password", $("#password").val().trim())
            axios({
                method: 'post',
                url: '${pageContext.request.contextPath}/user/retrievePassword',
                data: format,
            })
                .then(function (response) {
                    if (response.data == "ok") {
                        $(function () {
                            var tip = '${lg2.loginName}';
                            alert("密码重置成功");
                            if(GetQueryString("autoTest")!==null){
                            sendBack("meet");}
                            else{
                                window.location.href="/bokehall/user/login"
                            }
                        });
                    } else if (response.data = "false") {
                        alert("验证码错误,或手机号未注册")
                    }
                }).catch(function (error) {
                alert("修改失败,请重试")
            })
        }
    }
    function sendBack(state) {
        var data={"state":state };
        autoLogin.postMessage(JSON.stringify(data));
    }
    function GetQueryString(name)
    {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return unescape(r[2]); return null;
    }
</script>
</html>
